import styled from "styled-components";

export const Searchwrap = styled.div`
  margin-top: 50px;
  background-color: var(--bodyback);
  color: var(--fontsize);
  padding: 20px;
  & > .main {
    width: 70%;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    & > .left {
      width: 700px;
      & > .top {
        padding: 10px 20px;
        background-color: var(--essayback);
        border-radius: 10px;
        & > .searchinput {
          & > .top {
            display: flex;
            justify-content: space-between;
            padding: 10px 0 20px;
            font-size: 20px;
            & > .ArrowLeftOutlined {
              cursor: pointer;
              font-size: 25px;
              padding: 5px 20px;
              border-radius: 10px;
              transition: all 0.5s;
              &:hover {
                background-color: #eeeeee;
              }
            }
          }
          & > .input {
            width: 80%;
          }
        }
      }
      & > .main {
        margin-top: 40px;
        padding: 10px 20px;
        background-color: var(--essayback);
        border-radius: 10px;
      }
    }
    & > .right {
      position: sticky;
      top: 0;
      height: 100vh;
    }
  }
`;
